<div class="jzjc jzjc-main bgwhite">
  <div nz-row>
    <div nz-col nzSpan="24">
      <nz-tabset (nzSelectedIndexChange)="onTabIndexChange($event)" [(nzSelectedIndex)]='queryParam._tabtype'
        nzSize="small">
        <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.title">
        </nz-tab>
      </nz-tabset>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="24">
      <div class="topBtnBar">
        <div class="leftBtnBar">
          <button nz-button nzSize="default" (click)="optAll('qianshou')" *ngIf="btnState.qianshou"
            [disabled]="!btnState.qianshou">
            <i nz-icon nzType="form" nzTheme="outline"></i>签收
          </button>
          <button nz-button nzSize="default" (click)="showDetail()" *ngIf="btnState.addable"
            [disabled]="!btnState.addable">
            <i nz-icon nzType="plus" nzTheme="outline"></i>新增
          </button>
          <button nz-button nzSize="default" (click)="optAll('delete')" *ngIf="btnState.deletable"
            [disabled]="!btnState.deletable">
            <i nz-icon nzType="delete" nzTheme="outline"></i>删除
          </button>
          <button nz-button nzSize="default" (click)="export()">
            <i nz-icon nzType="download" nzTheme="outline"></i>导出
          </button>

          <button nz-button nzSize="default" (click)="optAll('tongYi',shenpiyijian)" *ngIf="btnState.agreeable"
            [disabled]="!btnState.agreeable">
            <i nz-icon nzType="check" nzTheme="outline"></i>同意
          </button>
          <button nz-button nzSize="default" (click)="optAll('boHui',shenpiyijian)" *ngIf="btnState.disagreeable"
            [disabled]="!btnState.disagreeable">
            <i nz-icon nzType="close" nzTheme="outline"></i>驳回
          </button>

          <button nz-button nzSize="default" (click)="optAll('shangbao',shangbao)" *ngIf="btnState.shangbao"
            [disabled]="!btnState.shangbao">
            <i nz-icon nzType="profile" nzTheme="outline"></i>上报
          </button>
          <button nz-button nzSize="default" (click)="optAll('sqYanqi',sqyq)" *ngIf="btnState.sqYanqi"
            [disabled]="!btnState.sqYanqi">
            <i nz-icon nzType="file-sync" nzTheme="outline"></i>申请延期
          </button>
          <button nz-button nzSize="default" (click)="optAll('sqXiaohao')" *ngIf="btnState.sqXiaohao"
            [disabled]="!btnState.sqXiaohao">
            <i nz-icon nzType="file-done" nzTheme="outline"></i>申请销号
          </button>
        </div>

        <div class="rightBtnBar">
          <span>
            车站：
            <input nz-input [(ngModel)]="queryParam.station" [nzAutocomplete]="auto_station" style="width:120px"
              (ngModelChange)="onChange_cz($event)" (click)="onChange_cz(null)" />
            <nz-autocomplete #auto_station nzWidth="120px">
              <nz-auto-option *ngFor="let opt of czList_filter" [nzValue]="opt.STATIONID" [nzLabel]="opt.STATIONNAME">
                {{opt.STATIONNAME}}
              </nz-auto-option>
            </nz-autocomplete>
          </span>&nbsp;
          <span *ngIf="queryParam.tabtype!=='7'">
            责任部门：
            <nz-tree-select class="table-content" [nzDropdownMatchSelectWidth]="false"
              [nzDropdownStyle]="{ 'max-height': '300px' }" [(ngModel)]="queryParam.chargeorg"
              [nzNodes]="jzjcTool.bmAllList">
            </nz-tree-select>
          </span>&nbsp;
          <span>
            类型：
            <nz-select [(ngModel)]="queryParam.problemtypeid" class="table-content">
              <nz-option *ngFor="let data of jzjcTool.wtlxList" [nzValue]="data.opValue" [nzLabel]="data.opName">
                {{data.opName}}
              </nz-option>
            </nz-select>
          </span>&nbsp;
          <span>
            状态：
            <nz-select [(ngModel)]="queryParam.status" class="cmp">
              <nz-option nzLabel="--请选择--" nzValue=""></nz-option>
              <nz-option *ngFor="let option of jzjcTool.status.statusArr" [nzLabel]="option.opName"
                [nzValue]="option.opValue">
              </nz-option>
            </nz-select>
          </span>&nbsp;
          <span>
            时间：
            <nz-date-picker [(ngModel)]="queryParam._startdate" nzPlaceHolder="开始时间"></nz-date-picker>
            <nz-date-picker [(ngModel)]="queryParam._enddate" nzPlaceHolder="结束时间"></nz-date-picker>
          </span>&nbsp;
          <button nz-button (click)="query()">
            <i nz-icon nzType="search" nzTheme="outline"></i>查询
          </button>
        </div>
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="24">
      <nz-spin [nzSpinning]="tableLoading" [ngClass]="tableClass">
        <nz-table #basicTable [nzData]="tableData" nzSize="small" [nzLoadingDelay]="1000" nzBordered
          [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="lockHeadScroll">
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="50px" nzShowCheckbox (nzCheckedChange)="checkAll($event)">
              </th>
              <th nzAlign="center" nzWidth="50px">序号</th>
              <th nzAlign="center" nzWidth="100px">日期</th>
              <th nzAlign="center" nzWidth="180px">状态</th>
              <th nzAlign="center" nzWidth="100px">调阅人</th>
              <th nzAlign="center" nzWidth="100px">车站</th>
              <th nzAlign="center" nzWidth="100px">设备名称</th>
              <th nzAlign="center" nzWidth="100px">问题类型</th>
              <th nzAlign="center" nzWidth="100px">问题等级</th>
              <th nzAlign="center" nzWidth="400px">发现问题</th>
              <th nzAlign="center">整改情况</th>
              <th nzAlign="center" nzWidth="200px">责任部门</th>
              <th nzAlign="center" nzWidth="100px">责任人</th>
              <th nzAlign="center" nzWidth="100px">整改时限</th>
              <th nzAlign="center" nzWidth="200px">销号</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of basicTable.data;index as i" (dblclick)="showDetail(data)" nz-tooltip
              nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
              <td nzShowCheckbox [(nzChecked)]="data.checked"></td>
              <td nzAlign="center">
                <div class="cmiddle" style="max-height:105px;">
                  {{+i+1}}
                </div>
              </td>
              <td>
                <div class="cmiddle" style="max-height:105px;">
                  {{data.createdate||''}}
                </div>
              </td>
              <td nzAlign="center">
                <div style="max-height:105px;">
                  <div [class]="statusFollow(data)" style="position: relative;top: 0.3em;"></div>&nbsp;
                  <span>{{data.newStatusText}}</span>
                </div>
              </td>
              <td>
                <div class="cmiddle" style="max-height:105px;">
                  {{data.creator}}
                </div>
              </td>
              <td nzAlign="center">
                <div class="cmiddle" style="max-height:105px;">{{data.stationname}}</div>
              </td>
              <td nzAlign="center">
                <div class="cmiddle" style="max-height:105px;">{{data.devName}}</div>
              </td>
              <td>
                <div class="cmiddle" style="max-height:105px;">{{data.problemtype}}</div>
              </td>
              <td nzAlign="center">
                <div class="cmiddle" style="max-height:105px;">
                  {{jzjcTool.wtdjList[data.problemlevel]||data.problemlevel||''}}</div>
              </td>
              <td>
                <div class="floatleft" style="max-height:105px;">{{data.problem}}</div>
              </td>
              <td>
                <div class="floatleft" style="max-height:105px;" [innerHtml]="data._handleinfo"></div>
              </td>
              <td nzAlign="center">
                <div class="cmiddle" style="max-height:105px;">{{data.chargeorgname}}</div>
              </td>
              <td>
                <div class="cmiddle" style="max-height:105px;">{{data.charger}}</div>
              </td>
              <td>
                <div class="cmiddle" style="max-height:105px;">{{data.rectdate|date:"yyyy-MM-dd"}}</div>
              </td>
              <td>
                <div class="cmiddle" style="max-height:105px;">{{jzjcTool.status.cancelList[data.cancle]||''}}</div>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </nz-spin>
      <div class="pagination-bar">
        <div class="pageWrap">
          每页
          <nz-select [(ngModel)]="pagination.selectedValue" (ngModelChange)="pagination.selectedChange()">
            <nz-option nzValue="20" nzLabel="20"></nz-option>
            <nz-option nzValue="50" nzLabel="50"></nz-option>
            <nz-option nzValue="100" nzLabel="100"></nz-option>
            <nz-option nzValue="200" nzLabel="200"></nz-option>
          </nz-select>
          条&nbsp;&nbsp;&nbsp;总共<span class="pageTotal">{{pagination.pageTotal}}</span>条
        </div>
        <div class="pageInation">
          <nz-pagination [nzPageSize]="pagination.selectedValue" [(nzPageIndex)]="pagination.pageIndex"
            [nzTotal]="pagination.pageTotal" (nzPageIndexChange)="pagination.pageIndexChange()"></nz-pagination>
        </div>
      </div>
    </div>
  </div>
</div>



<nz-modal [(nzVisible)]="modal.visible" [nzTitle]="modal.title" (nzOnCancel)="detailCancel()" [nzFooter]="null"
  [nzBodyStyle]="modal.nzBodyStyle" [nzWidth]="modal.nzBodyStyle.width" class="modalPanel jzjc">
  <app-jzjc-detail [detail]="detail" (btnClick)="detailClick($event)"></app-jzjc-detail>
</nz-modal>

<ng-template #sqyq>
  <span>申请延期日期*：<nz-date-picker [(ngModel)]="confirmParam._applyrectdate"></nz-date-picker></span>
  <br>
  <span>延期原因*：</span>
  <textarea nz-input [(ngModel)]="confirmParam.handleinfo"></textarea>
</ng-template>
<ng-template #shangbao>
  <span>上报情况*：</span>
  <textarea nz-input [(ngModel)]="confirmParam.handleinfo"></textarea>
</ng-template>
<ng-template #shenpiyijian>
  <span>审批意见*：</span>
  <textarea nz-input [(ngModel)]="confirmParam.handleinfo"></textarea>
</ng-template>